<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>combox</title>
		<script type="text/javascript">
			var provinceCmb;
			var cityCmb;
			var provinces=['四川','陕西','广东'];
			var cities=[
				['成都','绵阳','攀枝花'],
				['西安','咸阳','宝鸡'],
				['广州','深圳','珠海']
			];
			function init(){
				provinceCmb=document.getElementById("provinceCmb");
				var pOptions=provinceCmb.options;
				for(var i=0;i<provinces.length;i++){
					var option=document.createElement("OPTION");
					option.innerText=provinces[i];
					option.value=i;
					pOptions.add(option);
				}
				cityCmb=document.getElementById("cityCmb");
				var cOptions=cityCmb.options;
				for(var i=0;i<cities[0].length;i++){
					var option=document.createElement("OPTION");
					option.innerText=cities[0][i];
					option.value=i;
					cOptions.add(option);
				}
			}
			function changeProvince(){
				console.log("change....");
				var cOptions=cityCmb.options;
				var cityCount=cOptions.length;
				for(var i=0;i<cityCount;i++){
					cOptions.remove(0);
				}
				var pid=provinceCmb.value;
				console.log(pid);
				for(var i=0;i<cities[pid].length;i++){
					var option=document.createElement("OPTION");
					option.innerText=cities[pid][i];
					option.value=i;
					cOptions.add(option);
				}


			}
			function test(){
				provinceCmb=document.getElementById("provinceCmb");
				console.dir(provinceCmb);
				var pOptions=provinceCmb.options;
				var option=document.createElement("OPTION");
				option.innerText="Test";
				option.value=100;
				pOptions.add(option);


			}
		</script>
	</head>
	<body onload="init()">
		<select id="provinceCmb" onChange="changeProvince()">
			
		</select>
		<select id="cityCmb">
		</select>
		<input type="button" onclick="test()" value="test">
	</body>
</html>